<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 获取canvas元素和WebGL上下文（gl） -->
    <canvas id="canvas" width="400" height="400">此浏览器不支持 canvas</canvas>
  </body>
  <script>
    const ctx = document.querySelector('#canvas')
    const gl = ctx.getContext('webgl')

    // 顶点着色器
    const VERTEX_SHADER_SOURCE = `
    void main() {
      gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
      gl_PointSize = 10.0;
    }
    `

    // 片元着色器
    const FRAGMENT_SHADER_SOURCE = `
    void main() {
      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
    `

    // 创建着色器
    const vertexShader = gl.createShader(gl.VERTEX_SHADER)
    const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)

    // 指定着色器源码
    gl.shaderSource(vertexShader, VERTEX_SHADER_SOURCE)
    gl.shaderSource(fragmentShader, FRAGMENT_SHADER_SOURCE)

    // 编译着色器
    gl.compileShader(vertexShader)
    gl.compileShader(fragmentShader)

    // 创建程序对象
    const program = gl.createProgram()

    // 将着色器挂载到程序对象上
    gl.attachShader(program, vertexShader)
    gl.attachShader(program, fragmentShader)

    // 链接程序对象
    gl.linkProgram(program)

    // 使用程序对象
    gl.useProgram(program)

    // 清空颜色缓冲区
    gl.clearColor(1.0, 1.0, 1.0, 1.0) // 设置背景颜色为白色
    gl.clear(gl.COLOR_BUFFER_BIT) // 清空颜色缓冲区

    // 绘制一个点
    gl.drawArrays(gl.POINTS, 0, 1)
  </script>
</html>
